@import "../variables";

.chip {
	align-self: flex-start !important;
	height: 26px;
	background-color: $input-placeholder-color;
	padding: 0 10px;
	border-radius: 16px;
	margin-right: $input-padding-x;
	font-size: 0.75em;
	color: #777;
	.chip-icon {
		font-size: 2em;
		cursor: pointer;
		margin-left: $input-padding-x;
		width: 18px;
		height: 18px;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50%;
		color: $input-placeholder-color;
		background: darken($input-placeholder-color, 10);
	}
	&--active {
		color: white;
		background: $bt-brand-primary;
		font-weight: bold;
		.chip-icon {
			color: white;
			background: darken($bt-brand-primary, 5);
		}
	}
}
